<template>
	<view class="page-container">
		<view class="p-3 pb-1 page-wrap">
			<!-- <view class="flex justify-between align-center p-2 mb-3 serach-bar">
				<view @click="showPicker=true">{{statusList[currStatus].title}}</view>
				<u-icon @click="showPicker=true" color="#CECECE" size="16" name="arrow-right"></u-icon>
				<view class="mr-2 ml-1 line"></view>
				<u-input placeholder="电话/地址/下单记录" v-model="kw" clearable border="none">
				</u-input>
				<u-button @click="handleSearch" class="search-btn" :hairline="false" text="查询" size="mini"
					color="#007aff">
				</u-button>
			</view> -->
			<view class=" order-list">
				<u-list @scrolltolower="scrolltolower" height="1080rpx">
					<u-list-item class="mb-3 p-2 item" v-for="(item, idx) in orderList" :key="idx">
						<navigator :url="'/pages/workOrder/orderDetail?id=' + item.RepairInfo.ID"
							class="flex justify-between align-center order-headr">
							<view class="flex align-center left">
								<view class="index">
									{{ idx + 1 }}
								</view>
								<view class="title">
									{{ item.RepairInfo.AppointmentTime }}
								</view>
							</view>
							<view class="right">
								<u--text color="#e0584e" :text="item.RepairInfo.TotalRevenue"></u--text>
							</view>
						</navigator>
						<view class="pt-2 mt-2 info-list">
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">单号</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.ID }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">电话</view>
								<view class="flex justify-end align-center f-1" @click="handleInfoClick(item, 'tel')">
									<image class="icon" src="/static/work-order/dh.png" mode="widthFix">
									</image>
									<view class="ml-1 val">
										{{ item.RepairInfo.CustName + item.RepairInfo.Contact + " " + item.RepairInfo.Tel }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">地址</view>
								<navigator :url="`map?id=${item.RepairInfo.ID}`"
									class="flex justify-end align-center f-1">
									<image class="icon" src="/static/work-order/ddr.png" mode="widthFix">
									</image>
									<view class="ml-1 val">
										{{ item.RepairInfo.Addr }}
									</view>
								</navigator>
							</view>

							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">状态</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.Status }}
									</view>
								</view>
							</view>
							<view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">下单记录</view>
								<view class="flex justify-end align-center f-1">
									<view class="ml-1 val">
										{{ item.RepairInfo.CallDescr }}
									</view>
								</view>
							</view>

							<!-- <view class="flex justify-between align-baseline mb-1 info-item">
								<view class="name mr-3">{{ item.Name }}</view>
								<view class="flex justify-end align-center f-1" @click="handleInfoClick(infoItem)">
									<image class="icon" v-if="item.Type == 'addr'" src="/static/work-order/ddr.png"
										mode="widthFix"></image>
									<image class="icon" v-if="item.Type == 'tel'" src="/static/work-order/dh.png"
										mode="widthFix"></image>
									<view class="ml-1 val" :style="{ color: item.ValColor ? item.ValColor : '' }">
										{{ item.Val }}
									</view>
								</view>
							</view> -->
						</view>

					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="[statusList]" @cancel="showPicker = false" @confirm="handlePickerConfirm"
			keyName="title"></u-picker>
		<u-modal :show="showAssConfirm" @confirm="handleAssConfirm" @cancel="showAssConfirm = false"
			:showCancelButton="true" title="接单" content='您确定要接单吗？'></u-modal>
		<u-modal :show="showAssReject" @confirm="handleAssReject" @cancel="showAssReject = false" :showCancelButton="true"
			title="拒绝">
			<view class="slot-content">
				<u--textarea v-model="AssConfirmDescr" placeholder="请输入拒绝理由" confirmType="done"></u--textarea>
			</view>
		</u-modal>
		<u-safe-bottom></u-safe-bottom>

	</view>
</view></template>

<script>
import {
	getWorkOrderList,
	assConfirm,
	assReject
} from "@/apis/workOrder.js";
import {
	parseTime,
	getTotalPageNum
} from "@/util";
export default {
	data() {
		return {
			currStatus: 2,
			showPicker: false,
			showAssReject: false,
			showAssConfirm: false,
			currItem: null,
			statusList: [{
				title: '全部',
				code: 2,
			}, {
				title: '待接单',
				code: 7,
			}, {
				title: '待上报',
				code: 0,
			}, {
				title: '已上报',
				code: 1,
			}, {
				title: '服务中',
				code: 3,
			}, {
				title: '完成',
				code: 4,
			}, {
				title: '关闭',
				code: 5,
			},],
			kw: '',
			currPageNo: 1,
			totalPagesNo: 1,
			orderList: [],
			AssConfirmDescr: '',
			Latitude: '22',
			Longitude: '11',
		};
	},
	onShow() {
	},
	onLoad(option) {

		if (option.tel) {
			this.kw = option.tel
			this.fetchData()
		}
		const _this = this
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				_this.Latitude = res.latitude
				_this.Longitude = res.longitude
			}
		});
	},
	methods: {
		handleInfoClick(item, type) {
			console.log("handleInfoClick", item);
			if (type == "tel") {
				uni.makePhoneCall({
					phoneNumber: item.RepairInfo.Tel,
				});
				return;
			} else {
				return;
			}
		},
		async handleAssConfirm() {
			const currItem = this.currItem
			if (!currItem) return
			const res = await assConfirm({
				RepairId: currItem.RepairInfo.ID,
				Latitude: this.Latitude,
				Longitude: this.Longitude
			})
			if (res.MsgCode != 0) return
			this.showAssConfirm = false
			uni.showToast({
				title: '接单成功',
				duration: 1000,
				icon: 'success'
			});
			setTimeout(() => {
				this.initQuery()
				this.fetchData()
			}, 500)
		},
		async handleAssReject() {
			const currItem = this.currItem
			const AssConfirmDescr = this.AssConfirmDescr
			if (!currItem) return
			if (AssConfirmDescr == '') return uni.showToast({
				title: '请输入拒绝理由',
				duration: 1000,
				icon: 'none'
			})
			const res = await assReject({
				RepairId: currItem.RepairInfo.ID,
				Latitude: this.Latitude,
				Longitude: this.Longitude,
				AssConfirmDescr,
			})
			console.log('handleAssReject', res)

			if (res.MsgCode != 0) return
			this.showAssReject = false
			uni.showToast({
				title: '拒绝成功',
				duration: 1000,
				icon: 'success'
			});
			setTimeout(() => {
				this.initQuery()
				this.fetchData()
			}, 500)
		},
		handlePickerConfirm(e) {
			console.log('handlePickerConfirm', e)
			this.currStatus = e.indexs[0]
			this.showPicker = false
			this.initQuery()
			this.fetchData()
		},
		handleSearch() {
			this.initQuery()
			this.fetchData()
		},
		initQuery() {
			this.currPageNo = 1
			this.totalPagesNo = 1
			this.orderList = []
		},
		async fetchData() {
			const res = await getWorkOrderList({
				kw: this.kw,
				// status: 2,
				PageNo: this.currPageNo,
			})
			if (res.MsgCode != 0) return

			this.orderList = [...this.orderList, ...res.data.OrderList]
			this.totalPagesNo = getTotalPageNum(res.data.Count, 10)
		},
		formatImgUrl(arrStr) {
			try {
				const arr = JSON.parse(arrStr)
				return arr.map(item => {
					return 'http://img.help10000.com' + item
				})
			} catch (ex) {
				console.error("formatImgUrl", ex.message);
			}
		},
		scrolltolower() {
			if (this.currPageNo < this.totalPagesNo) {
				this.currPageNo += 1
				this.fetchData()
			}
		},
	}
}
</script>

<style lang="scss">
.page-container {
	.slot-content {
		width: 100%;
	}

	.page-wrap {
		.serach-bar {
			background-color: #fff;
			border-radius: $s-border-radius;
			color: #333;
			font-size: 28rpx;

			.line {
				height: 40rpx;
				width: 1px;
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}

			.search-btn {
				width: 100rpx;
				min-width: 100rpx;
				margin: 0;
				margin-left: 20rpx;
				height: 50rpx;
				border-width: 0 !important;
				border-radius: $s-border-radius;

			}
		}

		.order-list {
			.item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				font-size: 28rpx;

				.order-headr {
					.index {
						background-color: $s-text-color-brand;
						border-radius: 10rpx;
						color: #fff;
						padding: 2rpx 10rpx;
						font-size: 20rpx;
						line-height: 28rpx;
						height: 28rpx;
						margin-right: 20rpx
					}

					.title {
						color: #333;
						font-size: 32rpx;
					}
				}

				.info-list {
					position: relative;

					.info-item {
						font-size: 24rpx;

						.name {
							color: $s-text-color-label
						}

						.icon {
							width: 30rpx;
						}
					}

					&:before {
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						height: 1px;
						border-top: 1px solid #e5e5e5;
						color: #e5e5e5;
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleY(0.5);
						transform: scaleY(0.5);
						z-index: 2; //看情况使用
					}

					// &:after {
					// 	content: " ";
					// 	position: absolute;
					// 	left: 0;
					// 	bottom: 0;
					// 	right: 0;
					// 	height: 1px;
					// 	border-top: 1px solid #e5e5e5;
					// 	color: #e5e5e5;
					// 	-webkit-transform-origin: 0 0;
					// 	transform-origin: 0 0;
					// 	-webkit-transform: scaleY(0.5);
					// 	transform: scaleY(0.5);
					// 	z-index: 2; //看情况使用
					// }
				}


				.buttons ::v-deep .u-button {
					height: 44rpx;
					padding: 0 6px;
				}
			}
		}
	}
}
</style>
